<template>
	<view class="page">
		<view class="loading_css" v-if="isShow">
			<u-loading size="36" color="#AD3823"></u-loading>
			<view>加载中</view>
		</view>
		<template v-else>
			<view class="back_info" @tap.stop="handleJumpDiy" data-type="back" data-url="1">
				<image :src='STATIC_URL+"496.png"' mode=""></image>
			</view>
			<!-- <view class="back_info_2" @tap.stop="handleJumpDiy" data-type="back" data-url="1" v-if="data_type == 3">
				<image :src='STATIC_URL+"347.png"' mode=""></image>
			</view> -->
			<view class="scrollView">
				<view class="scoll_left" v-show="left_show">
					<scroll-view class="scoll_left_content" :scroll-y="true">
						<view class="scoll_left_item" v-for="(item, index) in list" :key="index"
							@tap.stop="changSwiper(index)">
							<image v-if="data_type == 1 || data_type == 2" :src="item.image" mode="aspectFill"></image>
							<image v-if="data_type == 3" :src="item.video_bg_img" mode="aspectFill"></image>
							<image v-if="data_type == 3" class="play_btn" :src='STATIC_URL+"809.png"' mode="aspectFill">
							</image>
						</view>
					</scroll-view>
				</view>
				<view class="scoll_right" @tap.stop="left_show = !left_show">
					<image :src='STATIC_URL+"804.png"' mode=""></image>
				</view>
			</view>


			<view class="audio" v-if="is_audio && data_type == 1">
				<cui-audiobar :src="file_url" :initDuration="time" @audioDuration="audioDuration"></cui-audiobar>
			</view>
			<view class="switch_btn">
				<image v-if="swiperIndex != 0" :src='STATIC_URL+"807.png"' mode="aspectFill"
					@tap.stop="switchSwiper('pre')"></image>
				<image v-if="swiperIndex == 0" mode="aspectFill"></image>
				<image v-if="swiperIndex != (list.length - 1)" :src='STATIC_URL+"808.png"' mode="aspectFill"
					@tap.stop="switchSwiper('nex')"></image>
				<image v-if="swiperIndex == (list.length - 1)" mode="aspectFill"></image>
			</view>

			<view v-if="data_type == 1 || data_type == 2">
				<view class="swiper-item">
					<image :src="list[swiperIndex].image" mode="aspectFill"></image>
				</view>
				<!-- <swiper
					class="swiper"
					:indicator-dots="false"
					:autoplay="false"
					:current="swiperIndex"
					@change="audioSwiper"
				>
					<swiper-item
						v-for="(item, index) in list"
						:key="index"
					>
						<view class="swiper-item">
							<image
								:src="item.image"
								mode="aspectFill"
							></image>
						</view>
					</swiper-item>
				</swiper> -->
			</view>
			
			<!-- 视频去掉背景图 -->
			<view v-if="data_type == 4">
				<view class="swiper-item">
					<image :src="list[swiperIndex].video_bg_img" mode="aspectFill"></image>
				</view>
				<!-- <swiper
					class="swiper"
					:indicator-dots="false"
					:autoplay="false"
					:current="swiperIndex"
				>
					<swiper-item
						v-for="(item, index) in list"
						:key="index"
					>
						<view class="swiper-item">
							<image
								:src="item.video_bg_img"
								mode="aspectFill"
							></image>
						</view>
					</swiper-item>
				</swiper> -->
			</view>
			<view class="item_video" v-if="data_type == 3">
				<!-- <view class="item_video_img" v-if="!is_play">
					<image :src="video_img" mode="aspectFill"></image>
					<image @tap.stop="playVideo" class="play_video_btn" :src='STATIC_URL+"809.png"' mode="aspectFill"></image>
				</view> -->
				<view class="item_video_shipin">
					<video id="myVideo" :poster="video_img" style="border-radius: 0;" class='shipin' object-fit="contain" :autoplay="false" :show-fullscreen-btn="false" :show-controls="true" :show-play-btn="true" :enable-progress-gesture="true" :src="file_url" @pause="videoPause" @ended="videoEnd" @error="videoError"
						@timeupdate="timeupdate"></video>
				</view>
			</view>
		</template>

	</view>
</template>

<script>
	import cuiAudiobar from "../components/cui-audiobar/components/cui-audiobar/cui-audiobar.vue"
	export default {
		data() {
			return {
				aid: "",
				data_type: "1", // 1图片+音频  2图片  3视频
				list: [],
				swiperIndex: 0, // 轮播图index
				left_show: false, // 控制左边图片的显示和隐藏
				file_url: "", // 音频或视频链接
				time: 0, // 时长
				isShow: true,
				is_audio: false,
				is_play: false, // 视频的显示与隐藏
				videoContext: null,
				video_img: "",
				videoTime: 0,
				screenHeight: 375,  // 横屏屏幕高度
			}
		},
		components: {
			cuiAudiobar
		},
		onLoad(options) {
			let {
				aid,
				data_type
			} = options;
			if (aid !== undefined) this.aid = aid;
			console.log(this.aid);
			if (data_type !== undefined) this.data_type = data_type;
			// console.log(this.data_type);
			this.getList();
			
			
			let _this = this;
			uni.getSystemInfo({
				success: res => {
					// console.log(res.screenHeight); //屏幕高度
					// _this.screenHeight = res.screenHeight;
					// console.log(_this.screenHeight);
				}
			})
		},
		onShow() {},
		onReady() {
			this.videoContext = uni.createVideoContext('myVideo', this);
		},
		onUnload() {
			this.saveTime();
		},
		methods: {
			// 获取章节列表  65556e08cba50
			getList() {
				this.$api.post(global.API_VERSION + '65556e08cba50', {
					course_id: this.aid
				}).then(res => {
					// console.log(res);
					this.isShow = false;
					if (res.data.code == 1) {
						this.list = res.data.data;
						for(var i = 0; i < this.list.length; i++) {
							if (this.list[i].is_end == 0) {
								this.swiperIndex = i;
								break;
							}
						}
						if (this.data_type == 1) {
							if (this.list.length > 0) {
								this.file_url = this.list[this.swiperIndex].file_url;
								this.time = this.list[this.swiperIndex].time;
							}
							this.is_audio = true;
						} else if (this.data_type == 2) {
							this.saveTime();
						} else if (this.data_type == 3) {
							this.video_img = this.list[this.swiperIndex].video_img;
							this.file_url = this.list[this.swiperIndex].file_url;
						}

					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			audioDuration(e) {
				this.videoTime = parseInt(Number(e.current));
				if (this.videoTime == this.list[this.swiperIndex].time) {
					this.saveTime();
				}
			},
			// 保存学习进度  videoTime
			saveTime() {
				this.$api.post(global.API_VERSION + '65556e1998c63', {
					chapter_id: this.list[this.swiperIndex].aid,
					time: this.videoTime
				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {
						this.list[this.swiperIndex].is_end = 1;
						if (res.data.data.is_over) {
							uni.redirectTo({
								url: '/pages/shouye/study/fabu?aid=' + this.aid
							})
						}
					}
				})
			},

			changSwiper(index) {
				let imgIndex = -1;
				for (var i = 0; i < this.list.length; i++) {
					if (this.list[i].is_end == 0) {
						imgIndex = i;
						break;
					}
				}
				// console.log(index);
				// console.log(imgIndex);
				if (this.data_type == 1 || this.data_type == 3) {
					if (imgIndex != -1) {
						if (index >= (imgIndex + 1)) {
							uni.showToast({
								title: '学完当前课程才能解锁下一节',
								icon: 'none'
							})
							return;
						}
					}

				} else if (this.data_type == 2) {
					if (imgIndex != -1) {
						if (index >= imgIndex) {
							uni.showToast({
								title: '学完当前课程才能解锁下一节',
								icon: 'none'
							})
							return;
						}
					}
				}

				if (this.data_type == 1) {
					this.swiperIndex = index;
					this.file_url = this.list[this.swiperIndex].file_url;
					this.time = this.list[this.swiperIndex].time;
					this.is_audio = false;
					setTimeout(() => {
						this.is_audio = true;
					}, 200)

				} else if (this.data_type == 2) {
					this.swiperIndex = index;
					this.saveTime();

				} else if (this.data_type == 3) {
					this.swiperIndex = index;
					this.is_play = false;
					this.video_img = this.list[this.swiperIndex].video_img;
					this.file_url = this.list[this.swiperIndex].file_url;
				}
			},
			switchSwiper(type) {
				if (type == 'pre') {
					if (this.swiperIndex == 0) {
						return;
					} else {
						if (this.data_type == 1) {
							this.swiperIndex = this.swiperIndex - 1;
							this.file_url = this.list[this.swiperIndex].file_url;
							this.time = this.list[this.swiperIndex].time;
							this.is_audio = false;
							setTimeout(() => {
								this.is_audio = true;
							}, 200)
						} else if (this.data_type == 2) {
							this.swiperIndex = this.swiperIndex - 1;
						} else if (this.data_type == 3) {
							this.is_play = false;
							this.swiperIndex = this.swiperIndex - 1;
							this.video_img = this.list[this.swiperIndex].video_img;
							this.file_url = this.list[this.swiperIndex].file_url;
						}

					}
				} else if (type == 'nex') {
					if (this.swiperIndex == (this.list.length - 1)) {
						return;
					} else {
						if (this.data_type == 1) {
							if (this.list[this.swiperIndex].is_end == 1) {
								this.swiperIndex += 1;
								this.file_url = this.list[this.swiperIndex].file_url;
								this.time = this.list[this.swiperIndex].time;
								this.is_audio = false;
								setTimeout(() => {
									this.is_audio = true;
								}, 200)
							} else {
								uni.showToast({
									title: '学完当前课程才能解锁下一节',
									icon: 'none'
								})
								return;
							}

						} else if (this.data_type == 2) {
							this.swiperIndex += 1;
							this.list[this.swiperIndex].is_end = 1;
							this.saveTime();
						} else if (this.data_type == 3) {
							// console.log(this.list[this.swiperIndex]);
							if (this.list[this.swiperIndex].is_end == 1) {
								this.is_play = false;
								this.swiperIndex += 1;
								this.video_img = this.list[this.swiperIndex].video_img;
								this.file_url = this.list[this.swiperIndex].file_url;
							} else {
								uni.showToast({
									title: '学完当前课程才能解锁下一节',
									icon: 'none'
								})
								return;
							}
						}
					}
				}
			},
			playVideo() {
				this.is_play = true;
				this.videoContext.play();
				// this.videoContext.seek(0);
			},
			videoPause() {
				// this.is_play = false;
			},
			videoEnd() {
				this.is_play = false;
				// this.list[this.swiperIndex].is_end = 1;
				this.saveTime();
			},
			videoError() {
				uni.showToast({
					title: '视频播放失败',
					icon: 'none'
				})
				this.is_play = false;
			},
			timeupdate(e) {
				this.videoTime = parseInt(e.detail.currentTime);
			}
		},
	}
</script>

<style lang="scss" scoped>
	page {
		font-family: Alimama DongFangDaKai;
	}
	.page {
		position: relative;

		.back_info {
			width: 24rpx;
			height: 24rpx;
			position: absolute;
			top: 15rpx;
			left: 24rpx;
			z-index: 35;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.back_info_2 {
			width: 18rpx;
			height: 24rpx;
			position: absolute;
			top: 24rpx;
			left: 24rpx;
			z-index: 30;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.scrollView {
			position: absolute;
			top: 56px;
			left: 0;
			display: flex;
			align-items: center;
			height: 262px;
			z-index: 30;

			.scoll_left {
				height: 100%;
				width: 144rpx;

				.scoll_left_content {
					width: 100%;
					height: 100%;
					background: #fff;

					.scoll_left_item {
						width: 144rpx;
						height: 80rpx;
						margin-bottom: 1px;
						position: relative;

						image {
							width: 100%;
							height: 100%;
						}

						.play_btn {
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							width: 28rpx;
							height: 28rpx;
						}
						
					}
				}
			}

			.scoll_right {
				width: 32rpx;
				height: 32rpx;
				margin-left: 34rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.audio {
			position: absolute;
			bottom: 0rpx;
			left: 0;
			width: 100%;
			padding: 0 24rpx;
			z-index: 35;
		}

		.switch_btn {
			width: 90rpx;
			height: 40rpx;
			background: rgba(0, 0, 0, 0.5);
			border-radius: 24rpx 0 0 24rpx;
			position: absolute;
			right: 0;
			bottom: 54rpx;
			z-index: 40;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 10rpx;

			image {
				width: 24rpx;
				height: 24rpx;
			}
		}

		.item_video {
			// width: 330rpx;
			// height: 210rpx;
			// position: absolute;
			// left: 200rpx;
			// top: 15%;
			// z-index: 20;
			width: 100vw;
			height: 100vh;
			position: relative;
			z-index: 20;

			.item_video_img {
				width: 100%;
				height: 100%;
				position: relative;

				image {
					width: 100%;
					height: 100%;
				}

				.play_video_btn {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 50rpx;
					height: 50rpx;
				}
			}

			.item_video_shipin {
				width: 100%;
				height: 100%;

				.shipin {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	/* .swiper {
		width: 100vw !important;
		height: 100vh !important;
	}

	swiper-item {
		width: 100vw !important;
		height: 100vh !important;
	} */

	.swiper-item {
		width: 100vw !important;
		height: 100vh !important;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>